<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      {{#link-to "index" class="navbar-brand"}}
        <div>
        <img src="{{model.brand.logo}}"
             alt="WhereHows Logo">
        <sup class="beta-badge">(Beta)</sup>
        </div>
      {{/link-to}}
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-left">
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle"
             data-toggle="dropdown"
             role="button"
             aria-haspopup="true"
             aria-expanded="false">
            <i class="caret"></i>
            Tools
          </a>
          <ul class="dropdown-menu" role="menu">
            {{#nav-link 'metadata' tagName="li"}}Metadata{{/nav-link}}
            {{#nav-link 'scripts' tagName="li"}}Script Finder{{/nav-link}}
            {{#nav-link 'schemahistory' tagName="li"}}Schema History{{/nav-link}}
            {{#nav-link 'idpc' tagName="li"}}IDPC{{/nav-link}}
          </ul>
        </li>

        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="caret"></i>
            <img src="/assets/assets/images/default_avatar.png" alt="User Avatar" class="img-circle user-avatar">
          </a>


          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">
              Help
              <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
            </li>

            <li>
              <!--TODO: DSS-6716-->
              <!-- DRY out with wrapper component that takes the link as an attribute-->
              <a href="https://iwww.corp.linkedin.com/wiki/cf/display/ENGS/Metadata+Coverage"
                 title="Metadata Coverage"
                 target="_blank">
                See Metadata Coverage
              </a>
            </li>

            <li>
              {{#dynamic-link params=model.feedbackMail}}
                Provide Feedback?
              {{/dynamic-link}}
            </li>

            <li role="separator" class="divider"></li>

            {{#nav-link 'logout' tagName="li"}}Logout{{/nav-link}}
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
